<template>
	<view class="order">
		<!-- tab 栏 -->
		<view class="tabBox">
			<view class="card">
				<view class="card_1" style="display: flex;justify-content: center;">
					<view class="curr">
					</view>
					<view class="my">
						我的总积分
					</view>
					<view class="curr" @tap.stop="goMember">
						积分提现
					</view>
				</view>
				<view class="card_2" style="display: flex;justify-content: center;">
					<view class="num">
						{{backup||0}}
					</view>
				</view>
			</view>
			<!-- <u-tabs height="100" :list="tabList" :is-scroll="false" :current="tabCurrent" @change="tabChange" bar-width="100"
				inactive-color="#979797" active-color="#3DAD81"></u-tabs> -->
		</view>
		<!-- 列表 -->
		<view class="listBox">
			
			<view class="list" v-for="(item,index) in list" :key="index" >
				<!-- <view class="" style="display: flex;justify-content: space-between;">
					<view class="code">
						条码：{{1234567859}}
					</view>
					<view class="code" style="color: #3DAD81;">积分：{{item.actual_price}}</view>
				</view> -->
				
				<view class="list_t flex-r-b-c">
					<!-- <image :src="item.goods_img" mode=""></image> -->
					<view class="list_t_r" >
						<view class="list_t_r_t flex-r-b-c">
							<view class="name" >获取时间：{{item.createTime||''}}</view>
							
						</view>
						<view class="list_t_r_t flex-r-b-c">
							<view class="name" style="color: #BABABA;">获取方式：{{item.type == '"COMMISSION"'?'提成获取':'扫码获取'}}</view>
							<!-- <view class="name">昵称：{{item.goods_name}}</view>
							<view class="name">
								充值等级：{{item.stage}}
							</view> -->
							<!-- 0=未付款,1=已支付,2=待接单,3=制作中,4=待配送,5=配送中,6=已送达,7=已完成,8=用户取消,9=商家取消,10=支付失败,11=已过期,12商品已回购，13商家取消 -->
							<!-- <view class="state">{{item.status == 0 ? '未付款' : item.status == 1 ? '已支付' : item.status == 2 ? '待接单' : item.status == 3 ? '制作中' : item.status == 4 ? '待配送' : item.status == 5 ? '配送中' : item.status == 6 ? '已送达' : item.status == 7 ? '已完成' : item.status == 8 ? '用户取消' : item.status == 9 ? '商家取消' : item.status == 10 ? '支付失败':item.status == 11 ?  '已过期':item.status == 12 ?  '商品已回购': '商家取消'}}</view> -->
						</view>
					</view>
					<view class="" style="width: 26%;color: #3DAD81;font-size: 40rpx;">
						+{{item.point.toFixed(2)}}
					</view>
					
				</view>
				<!-- <view class="list_b flex-r-b-c">
					<view class="time" style="color: #3DAD81;font-size: 22rpx;">佣金收益</view>
					<view class="text"><view class="money" style="color: #FF3E3E;font-size: 26rpx;">{{item.actual_price}}元</view></view>
				</view> -->
				
				<!-- <view class="btnBox flex-r-s-c" v-if="item.is_huigou == 1 && item.status == 1">
					<view class="btn" @tap.stop="buyBack(item)" >回购</view>
					<view class="btn" style="margin-right: 30rpx;" @tap.stop="pickUpGoods(item)">提货</view>
				</view> -->
				
			</view>
			
			<!-- 提示栏 -->
			<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image: this.$base.smallimgUrl,
				tabCurrent: 0,
				tabList: [{
					name: '审核中',
					index: 0
				}, {
					name: '已通过',
					index: 1
				}, {
					name: '未通过',
					index: 2
				}],
				page: 1,
				list: [],
				isText: '',
				backup:'',
				last_page:1
			};
		},
		onLoad() {
			
		},
		onShow(){
			this.list = []
			this.page = 1
			this.isText = ''
			this.getOrderList()
		},
		methods: {
			// tab 切换
			tabChange(e){
				this.tabCurrent = e
				this.list = []
				this.page = 1
				this.isText = ''
				this.getOrderList()
			},
			// 获取订单列表
			getOrderList(){
				let that = this
				that.$api.listByloginUser().then(res => {
					res.data.rows.length == 0 ? that.isText = '暂无数据' : that.isText = ''
					that.list = that.list.concat(res.data.rows)
					that.last_page = Math.ceil(res.data.rows.length / res.data.total)
					this.backup = res.data.backup
					console.log(res.data,'that.list')
				})
			},
			// 点击提货
			pickUpGoods(el){
				let that = this
				uni.showModal({
				 title:  "确定是否提货",
				 success: function (res) {
					  if (res.confirm) {
							that.$api.orderTh({
							 	order_number: el.order_number,
							}).then(res => {
							 	console.log(res)
								that.goDetails(el)
							})
					    } else{
							 console.log('用户点击取消');
					    }
					}
				});
				
			},
			// 点击回购
			buyBack(el){
				let that = this
				uni.showModal({
					 title:  "确定是否回购",
					 success: function (res) {
						if (res.confirm) {
							 console.log('用户点击确定');
							 that.$api.orderHg({
								order_number: el.order_number,
							 }).then(res => {
								console.log(res)
								that.goDetails(el)
							 }) 
						} else{
							 console.log('用户点击取消');
						}
					}
				});
			},
			// 跳转到佣金提现页面
			goMember(){
				console.log('dddddd')
				uni.navigateTo({
					url: '/pages/my/memberWithdrawal/memberWithdrawal' 
				})
			},
			// 跳转到详情页面
			
			goDetails(el){
				let res = {
					order_number: el.order_number,
					goods_img: el.goods_img,
					goods_name: el.goods_name
				}
				uni.navigateTo({
					url: '/pages/order/details/details?res=' + JSON.stringify(res)
				})
			}
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.getOrderList()
			}
		}
		
	}
</script>

<style lang="less">
	page{
		background-color: #f9f9f9;
	}
	.u-tab-bar{
		display: none !important;
	}
	.order{
		width: 100vw;
		.tabBox{
			width: 100%;
			height: 210rpx;
			.card{
				width: 90%;
				height: 100%;
				background: rgba(61, 173, 129, 0.2);
				border-radius: 20rpx;
				margin: 20rpx auto;
				.card_1{
					height: 110rpx;
					line-height: 110rpx;
					padding-top: 10rpx;
					text-align: center;
					.my{
						font-weight: 600;
						font-size: 40rpx;
					}
					.curr{
						width: 32%;
						color: #1FC064;
						font-weight: 400;
						font-size: 28rpx;
						padding-right: 10rpx;
						text-align: right;
					}
				}
				.card_2{
					width: 100%;
					text-align: center;
					.num{
						font-size: 40rpx;
						color: #3DAD81;
					}
				}
			}
		}
		.listBox{
			width: 95%;
			margin: 30rpx auto;
			.list{
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				.code{
					color: #979797;
					font-weight: 400;
					font-size: 12px;
					line-height: 17px;
					margin-bottom: 10rpx;
				}
				.list_t{
					// border-bottom: 1px solid #F9F9F9;
					padding: 10rpx 0;
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.list_t_r{
						width: 83%;
						.list_t_r_t{
							font-size: 28rpx;
							font-weight: 400;
							.name{
								margin-top: 12rpx;
							}
							.state{
								color: #7F8084;
							}
						}
						.specifications{
							font-size: 24rpx;
							font-weight: 400;
							color: #3DAD81;
							margin: 16rpx 0;
						}
						.time{
							font-size: 24rpx;
							font-weight: 400;
							color: #979797;
							margin: 20rpx 0;
						}
					}
				}
				
				.list_b{
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
					padding-top: 14rpx;
					.text{
						.money{
							display: inline-block;
							font-size: 32rpx;
							font-weight: 600;
							color: #000;
						}
					}
				}
				
				.btnBox{
					width: 100%;
					margin-top: 30rpx;
					flex-direction: row-reverse !important;
					.btn{
						width: 132rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 46rpx;
						text-align: center;
						background-color: #000;
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
				
			}
		}
	}
</style>
